<!--
 * @Author: Mr.Sen
 * @LastEditTime: 2021-02-22 17:25:52
 * @Description: 
 * @Website: https://grimoire.cn
 * @Copyright (c) Mr.Sen All rights reserved.
-->
{%extends "root.html" %}

{% block userInfo %}
<style>
	.body {
		min-height: 100vh;
		transition: transform .4s;
	}

	.body>main {
		min-height: calc(70vh - 238px);
	}

	.body {
		transform: translateX(0);
		min-height: calc(100vh - 80px);
	}

	@media only screen and (max-width:768px) {
		.body>main {
			width: 100vw;
			min-height: calc(70vh - 160px);
		}
	}
</style>
<div id="userInfo">
	<a href="/user/">
		<img src="{{avatar}}" height="100px" width="100px">
		<!-- <img src="img/img.png" height="100px" width="100px"> -->
	</a>
	<div class="userName">{{nickName}}</div>
	<div class="detail" style="min-height: 26px;">
		<link rel="stylesheet" href="{{iconfont}}">
		{% for i in iconList %}
		<a href="{{i.url}}" class="iconfont {{i.icon}}" title="{{i.icon}}"></a>
		{% endfor %}
	</div>
</div>
{% endblock %}

{% block mainbody %}
<link rel="stylesheet" type="text/css" href="/static/css/mycompent.css" />
<div class="subContent">
	{% for i in range %}

	<a class="doc-list-card" href="#">
		<div class="content loading">
			<article class="loading-content">
				<div class="date"></div>
				<div class="title"></div>
				<div class="brief"></div>
			</article>
			<article class="loading-animation">
				<div class="sk-wave">
					<div class="sk-rect sk-rect-1"></div>
					<div class="sk-rect sk-rect-2"></div>
					<div class="sk-rect sk-rect-3"></div>
					<div class="sk-rect sk-rect-4"></div>
					<div class="sk-rect sk-rect-5"></div>
				</div>
			</article>
		</div>
	</a>

	{% endfor %}
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.0/axios.min.js"></script>
<script type="text/javascript">

	axios.interceptors.request.use((config) => {
		config.headers['X-Requested-With'] = 'XMLHttpRequest';
		let regex = /.*csrftoken=([^;.]*).*$/;
		config.headers['X-CSRFToken'] = document.cookie.match(regex) === null ? null : document.cookie.match(regex)[1];
		return config
	});
	function cmp(s1, s2) {
		return s2.count - s1.count;
	}
	var httpUrl = "/metaOfUser/";
	axios.get(
		httpUrl,
	).then((response) => {
		var dataList = response.data.lst;
		dataList = dataList.sort(cmp);
		var title = document.querySelectorAll(".title");
		var content = document.querySelectorAll(".content")
		// var info = document.querySelectorAll(".content li");
		var brief = document.querySelectorAll(".brief");
		var loadingContent = document.querySelectorAll(".loading-content");
		var loadingAnimation = document.querySelectorAll(".loading-animation");
		var date = document.querySelectorAll(".date");
		var card = document.querySelectorAll(".doc-list-card")

		for (var i = 0; i < dataList.length; i++) {
			title[i].innerText = dataList[i].name;
			card[i].href = "/docOfMeta/?meta=" + dataList[i].id;

			brief[i].innerText = "共有 " + dataList[i].count + " 篇文章";
			date[i].innerText = getLocalTime(dataList[i].lastEdit);
			loadingContent[i].setAttribute("class", "");
			loadingAnimation[i].style.display = "none";
			loadingAnimation[i].setAttribute("class", "")
			content[i].setAttribute("class", "content")
		}
	})
	function getTitle(str) {
		if (str == undefined) {
			str = "暂无内容"
		}
		return str
	}
</script>
{% endblock %}